<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式的绑定</title>
    <style>
        .school {
            border: 1px solid black;
        }

        .demo1 {
            background-color: skyblue;
        }

        .demo2 {
            background-color: green;
        }

        .demo3 {
            text-shadow: 2px 2px 2px yellowgreen;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    1. 绑定class样式
         写法:class="xxx" xxx可以是字符串、对象、数组
           字符串写法适用于：类名不确定，要动态获取
           对象写法适用于：类名确定，但不确定用不用
           数组写法适用于：同时动态的绑定多个class样式
    2. 绑定style样式
           :style="{fontSize: xxx}"其中xxx是data中配置的属性
 -->
<div id="root">
    <h1>动态绑定class的方法</h1>
    <!--    字符串方法"适用于绑定样式名,但具体的名不知道-->
    <h2 class="school" :class="t1">welcome</h2>
    <!--    数组方法,使用于绑定多个class-->
    <h2 class="school" :class="[t1,t2]">welcome</h2>
    <!--对象写法, 适用于 class已知.但具体加不加样式要动态判断-->
    <h2 class="school" :class="{demo1:hasD1,demo2:hasD2}">welcome</h2>
<!--    动态绑定style样式-->
    <h2 class="school demo3" :style="{fontSize}">welcome</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                hasD1: true,
                hasD2: false,
                t1: "demo1",
                t2: "demo2",
                t3: "demo3",
                fontSize: "40px"
            }
        }
    })
</script>
</body>
</html>